<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入网页头标 -->
    <link rel="shortcut icon" href="./images/favicon.ico">
    <!-- 引入css -->
    <link rel="stylesheet" href="../css/index-4.css">
    <link rel="stylesheet" href="../css/shop.css">
    <!-- 引入初始化css -->
    <link rel="stylesheet" href="../css/public.css">
    
</head>

<body>
    <div class="w">
        <!-- 头部logo -->
        <div class="header">
            <div class="header-f">
                <a href="#">
                    <img src="../images/xmad_15330597618059_zrRgh.webp" alt="">
                </a>
            </div>
        </div>
        
        <!-- 注册页面 -->
        <div class="registerarea">
            <h3>
                注册新用户
                <em>
					我有账号，去<a href="login.html">登录</a>
				</em>
            </h3>
            <div class="reg_form">

                <form action="">
                    <ul>
                        <li>
                            <label for="tel">手机号:</label>
                            <input type="text" class="inp account" id="tel" placeholder="输入手机号码">
                            <button>发送验证码</button>
                            <!-- <span class="error">		
							<i class="error_icon"></i>
						手机号码格式不正确，请从新输入   -->
						</span>
                        </li>
                        <li>
                            <label for="">短信验证码:</label>
                            <input type="text" class="inp" placeholder="输入验证码">

                        </li>
                        <li>
                            <label for="">登陆密码:</label>
                            <input type="text" class="inp pwd" placeholder="密码应为6到16位的英文和数字">
                            <span class="success">		
							<i class="success_icon"></i>
                            输入正确  
						</span>
                        </li>
                        <li class="safe">
                            安全程度
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>
                        </li>

                        <li>
                            <label for="">确认密码:</label>
                            <input type="text" class="inp" placeholder="请再次输入密码">
                            <span class="success">		
                            <i class="success_icon"></i>
                            输入正确  
						</span>
                        </li>
                        <li class="agree">

                            <input type="checkbox" >同意协议并注册
                            <a href="#">《同意用户协议》</a>
                        </li>
                        <li>
                            <button class="over loginbtn">完成注册</button>
                        </li>
                    </ul>
                </form>
                <script>
                    /* 
                    js验证  手机号|...  的正则表达式
                        验证账号：手机号
                        验证密码：6-16英文+数字
                    */
                    // 获取输入框的值: 标签.value
                    let account = document.querySelector(".account");
                    let pwd     = document.querySelector(".pwd");
                    console.log('account: ',account.value);
                    console.log('pwd: ',pwd.value);
                    // 点击登录，获取输入框的值，再去验证用户输入的账号和密码
                    document.querySelector('.loginbtn').onclick = function(){
                        // console.log("点击了登录按钮");
                        // console.log('account: ',account.value);
                        // console.log('pwd: ',pwd.value);
                        let accountVal = account.value;
                        let pwdVal     = pwd.value;
                        console.log(accountVal,pwdVal);
                        // 验证账号
                        let regTel = /^1[3-9][0-9]{9}$/;
                        console.log(regTel.test(accountVal));//正则.test(要验证的值)
                        // if(regTel.test(accountVal) == false){
                        if(!regTel.test(accountVal)){
                            alert('请输入正确的手机号');//弹框
                            return false;
                        }
                        // 验证密码
                        let regPwd =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
                        if(regPwd.test(pwdVal) == false){
                            alert('密码必须为6到16位的英文和数字');
                            return false;
                        }
                        // 判断账号和密码是否正确：连接后端（后端连接数据库）
            
                        // 假设账号密码都正确，跳转页面window.location.href = '路径';
                        //  window.location.href = 'https://www.baidu.com';
                        window.location.href = './index-4.html';
                    }
                </script>
            </div>
        </div>
        <!-- 注册页面底部 -->
        <div class="footer">
            <p class="links">
                关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 小米抢购 | 友情链接 | 销售联盟 | 小米购社区 | 小米公益 | English Site | Contact U
            </p>

            <p class="copyright">
                地址：武汉市江夏区 藏龙岛 藏龙大峡谷
            </p>
        </div>
    </div>
</body>

</html>